<template>
  <div style="margin-top: 1.5%">
    <div class="sidebar">
      <!-- 跳转到指定模块 -->
      <el-card class="btn-box">
        <el-button
          style="margin-left: 10px"
          @click="goAssignBlock('block'+ 0,20)"
        >医疗器械情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 1,20)"
        >不良事件情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 2,20)"
        >使用情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 3,20)"
        >事件初步原因分析和处置
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 4,20)"
        >事件结果
        </el-button>
      </el-card>
    </div>

    <div class="content">

      <!--医疗器械情况-->
      <div style="width: 100%; margin-left: 8%">
        <div class="bname" ref="block0">医疗器械情况</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="form" :model="form" label-width="140px">
            <el-form-item label="类别" :rules="[{required: true, message: '类型未选择'}]">
              <el-radio-group v-model="form.devicecategory">
                <el-radio label="设备类"></el-radio>
                <el-radio label="耗材类"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="产品名称" :rules="[{required: true, message: '产品名称不能为空'}]" style="width: 600px">
              <el-input v-model="form.proName"></el-input>
            </el-form-item>
            <el-form-item label="注册证编号" :rules="[{required: true, message: '注册证编号不能为空'}]" style="width: 600px">
              <el-input v-model="form.zhuceNum"></el-input>
            </el-form-item>
            <el-form-item label="型号" style="width: 600px">
              <el-input v-model="form.molNum"></el-input>
            </el-form-item>
            <el-form-item label="规格" style="width: 600px">
              <el-input v-model="form.spection"></el-input>
            </el-form-item>
            <el-form-item label="产品批号" style="width: 600px">
              <el-input v-model="form.prolotNum"></el-input>
            </el-form-item>
            <el-form-item label="产品编号" style="width: 600px">
              <el-input v-model="form.probianNum"></el-input>
            </el-form-item>
            <el-form-item label="UDI" style="width: 600px">
              <el-input v-model="form.UDI"></el-input>
            </el-form-item>
            <el-form-item label="生产日期">
              <el-date-picker
                v-model="form.produceDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有效日期">
              <el-date-picker
                v-model="form.youxDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="上市许可持有人名称" style="width: 600px">
              <el-input v-model="form.shangshiName"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--不良事件情况-->
      <div style="width: 100%; margin-top:1%; margin-left: 8%">
        <div class="bname" ref="block1" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">不良事件情况
        </div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="form" :model="form" label-width="140px">
            <el-form-item label="事件发生日期" :rules="[{required: true, message: '事件发生日期不能为空'}]">
              <el-date-picker
                v-model="form.thinghapDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="发现或获知日期" :rules="[{required: true, message: '发现或获知日期不能为空'}]">
              <el-date-picker
                v-model="form.findgetDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="伤害" :rules="[{required: true, message: '伤害未选择'}]">
              <el-radio-group v-model="form.shangHai">
                <el-radio label="死亡"></el-radio>
                <el-radio label="严重伤害"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="伤害表现" style="width: 600px;">
              <el-input type="textarea" v-model="form.hurtBiao" :rows="2" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <el-upload
                action=""
                :limit="500"
                list-type="picture-card"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :file-list="firbadList"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="器械故障表现" style="width: 600px;">
              <el-input type="textarea" v-model="form.instruFailure" :rows="2" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <el-upload
                action=""
                :limit="500"
                list-type="picture-card"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :file-list="secbadList"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="是否涉及患者">
              <el-radio-group v-model="form.tfHuan">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-show="form.tfHuan == '是'">
              <el-form-item label="诊疗类别">
                <el-radio-group v-model="form.zhenliaoLei" :rules="[{required: true, message: '事件发生日期不能为空'}]">
                  <el-radio label="急诊"></el-radio>
                  <el-radio label="门诊"></el-radio>
                  <el-radio label="住院"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="姓名" style="width: 600px;">
                <el-input v-model="form.badName"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="form.badbirDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="form.badAge"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.badGen">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="病历号">
                <el-input v-model="form.badbegNum"></el-input>
              </el-form-item>
              <el-form-item label="既往病史" style="width: 600px;">
                <el-input type="textarea" v-model="form.badwangstory" :rows="2" resize="none"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>

      <!--使用情况-->
      <div style="width: 100%; margin-left: 8%; margin-top:1%">
        <div class="bname" ref="block2" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">使用情况</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="form" :model="form" label-width="140px">
            <el-form-item label="预期治疗疾病或作用" style="width: 600px;">
              <el-input type="textarea" v-model="form.expdiseaseEffect" :rows="2" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="器械使用日期" :rules="[{required: true, message: '器械使用日期不能为空'}]">
              <el-date-picker
                v-model="form.instruseDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="使用场所" :rules="[{required: true, message: '使用场所未选择'}]">
              <el-radio-group v-model="form.placeUses">
                <el-radio label="医疗机构"></el-radio>
                <el-radio label="家庭"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="场所名称" style="width: 600px">
              <el-input v-model="form.placeNaame"></el-input>
            </el-form-item>
            <el-form-item label="使用过程" style="width: 600px;" :rules="[{required: true, message: '使用过程不能为空'}]">
              <el-input type="textarea" v-model="form.useProcess" :rows="2" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="合并用药械情况说明" style="width: 600px;">
              <el-input type="textarea" v-model="form.comdrugDes" :rows="2" resize="none"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--事件初步原因分析与处置-->
      <div style="width: 100%; margin-left: 8%; margin-top:1%">
        <div class="bname" ref="block3" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">
          事件初步原因分析与处置
        </div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="form" :model="form" label-width="140px">
            <el-form-item label="事件原因分析" :rules="[{required: true, message: '类型未选择'}]">
              <el-checkbox-group v-model="form.causeAnalysis">
                <el-checkbox label="产品原因(包括说明书等)"></el-checkbox>
                <el-checkbox label="操作原因"></el-checkbox>
                <el-checkbox label="患者自身原因"></el-checkbox>
                <el-checkbox label="无法确定"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="事件原因分析描述" style="width: 600px;">
              <el-input type="textarea" v-model="form.thingcaudesp" :rows="3" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <el-upload
                action=""
                :limit="500"
                list-type="picture-card"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :file-list="thirdbadList"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="初步处置情况" style="width: 600px;" :rules="[{required: true, message: '初步处置情况不能为空'}]">
              <el-input type="textarea" v-model="form.preDisposition" :rows="3" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <el-upload
                action=""
                :limit="500"
                list-type="picture-card"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :file-list="forbadList"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>


          </el-form>
        </div>
      </div>

      <!--事件结果-->
      <div style="width: 100%; margin-left: 8%; margin-top:1%">
        <div class="bname" ref="block4" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">事件结果</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="form" :model="form" label-width="140px">
            <el-form-item label="纠纷或纠纷隐患可能性" :rules="[{required: true, message: '纠纷或纠纷隐患可能性未选择'}]">
              <el-radio-group v-model="form.jiuImpossible">
                <el-radio label="确定有"></el-radio>
                <el-radio label="可能有"></el-radio>
                <el-radio label="无"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="事件严重程度">
              <el-select v-model="form.thingSerious" placeholder="请选择" filterable>
                <el-option
                  v-for="item in thingSeriousOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事件分级" style="width: 600px">
              <el-radio-group v-model="form.thingFenji">
                <el-radio label="Ⅰ级事件: 发生错误，造成患者死亡 (包括损害程度I级)" style="margin-top: 10px; margin-bottom: 10px"></el-radio>
                <el-radio label="Ⅱ级事件: 发生错误，且造成患者伤害 (包括损害程度E、F、G、H级)" style="margin-bottom: 10px"></el-radio>
                <el-radio label="Ⅲ级事件: 发生错误，但未造成患者伤害 (包括损害程度B、C、D级)" style="margin-bottom: 10px"></el-radio>
                <el-radio label="Ⅳ级事件: 错误未发生 (错误隐患)(包括损害程度A级)"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="伤害严重度">
              <el-radio-group v-model="form.hurtDu">
                <el-radio label="死亡"></el-radio>
                <el-radio label="极度严重"></el-radio>
                <el-radio label="重度"></el-radio>
                <el-radio label="中度"></el-radio>
                <el-radio label="轻度"></el-radio>
                <el-radio label="未造成伤害"></el-radio>
                <el-radio label="无伤害"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>

      </div>

    </div>

    <!--保存按钮-->
    <div style="position: fixed; margin-top: -0.5%; right: 3%; width: 300px">
      <el-button
        type="primary"
        style="margin-left: 15px"
        @click=""
      >保存
      </el-button>
      <el-button
        type="info" plain
        style="margin-left: 15px"
        @click=""
      >返回
      </el-button>
    </div>

  </div>
</template>


<script>
import ScrollPane from "@/layout/components/TagsView/ScrollPane";

export default {
  components: {ScrollPane},
  data() {
    return {
      form: {
        name: '',
        devicecategory: '',
        proName: '',
        zhuceNum: '',
        molNum: '',
        spection: '',
        prolotNum: '',
        probianNum: '',
        UDI: '',
        produceDate: '',
        youxDate: '',
        shangshiName: '',
        thinghapDate: '',
        findgetDate: '',
        shangHai: '',
        hurtBiao: '',
        instruFailure: '',
        tfHuan: '',
        zhenliaoLei: '',
        badName: '',
        badbirDate: '',
        badAge: '',
        badGen: '',
        badbegNum: '',
        badwangstory: '',
        expdiseaseEffect: '',
        instruseDate: '',
        placeUses: '',
        placeNaame: '',
        useProcess: '',
        comdrugDes: '',
        causeAnalysis: [],
        thingcaudesp: '',
        preDisposition: '',
        jiuImpossible: '',
        thingFenji: '',
        hurtDu: '',
        thingSerious: '',
      },
      thingSeriousOption: [
        {
          value: 'A级:客观环境或条件可能引发不良事件(不良事件隐患)',
        }, {
          value: 'B级:不良事件发生但未累及患者',
        }],
      firbadList: [],
      secbadList: [],
      thirdbadList: [],
      forbadList: [],
    }
  },
  // 禁止web端屏幕缩放
  created() {
    window.addEventListener("mousewheel", function (event) {
      if (event.ctrlKey === true || event.metaKey) {
        event.preventDefault();
      }
    }, {passive: false})
  },
  methods: {
    //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
    goAssignBlock(el, speed) {
      let t = this.$refs[el].offsetTop - 100

      function scrollToTop() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop > t) {
          window.scrollTo(0, scrollTop - speed);

          // 使用 requestAnimationFrame 进行平滑滚动
          requestId = window.requestAnimationFrame(scrollToTop);
        } else {
          window.scrollTo(0, t);

          // 取消动画帧的请求
          window.cancelAnimationFrame(requestId);
        }
      }

      let requestId = window.requestAnimationFrame(scrollToTop);
    },
    //上传图片
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
    },
    handleExceed() {
      this.msgError("最多只能传500张照片");
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      const fileData = new FormData();
      fileData.append("avatar", file);
      //upload为上传的接口
      upload(fileData).then(res => {
        this.imgUrl = res.imgUrl;
        //对返回的图片地址进行回显
        this.$set(this.form, "avatar", this.imgUrl);
      });
      //阻止传到本地浏览器
      return false;
    }

  },

}

</script>

<style lang="scss" scoped>
.sidebar {
  margin-left: 3%;
  width: 10%;
  float: left;
  display: flex;
}

.content {
  margin-left: 3%;
  margin-right: 1.5%;
  width: 87%;
  float: right;
}

.btn-box {
  position: fixed;
  margin-top: 1%;

  ::v-deep .el-card__body {
    padding: 15px 15px 15px 5px;
  }
}

.btn-box button {
  text-align: left;
  padding: 0 0 0 10px;
  display: block;
  width: 180px;
  height: 40px;
  border: none;
  cursor: pointer;
}

.btn-box button:hover {
  background: hsl(221, 98%, 68%);
  color: white;
}

.block {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 5rem;
  box-sizing: border-box;

  .el-form-item {
    margin-bottom: 10px;
  }
}

.bname {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #606266;
}

</style>
